<template>
    <div class="two">
        <div id="mainThree">
        </div>
    </div>
</template>

<script>
    import * as echarts from 'echarts';
    export default {
        data() {
            return {
                value: '',
                yearly: [],
                countrylist: [],
                isLoading: false,
                dateboundlist: {}, //时间为key
                myChart: null,
            }
        },
        mounted() {
            this.getDataDraw();
        },
        methods: {
            //请求数据
            getDataDraw() {
                this.isLoading = true;
                this.$store.dispatch("ajaxApi", {
                    url: `/zonghe/api/algor?name.equals=能源消耗&sort=add_time,desc&size=1`,
                    method: "get",
                    succeed: (res) => {
                        // console.log(res);
                        let data = JSON.parse(res[0].outputs)
                        let forecast = data.forecast;
                        let original = data.original;
                        console.log(original);
                        console.log(forecast);
                        for (let key in original) {
                            if (this.yearly.length == 0) {
                                for (let item of original[key]) {
                                    this.yearly.push(item.x);
                                    this.yearly.sort();
                                }
                            }
                            for (let a of original[key]) {
                                let obj = {};
                                obj.name = key;
                                obj.value = a.y;
                                if (!this.dateboundlist[a.x]) {
                                    this.dateboundlist[a.x] = []
                                }
                                this.dateboundlist[a.x].push(obj);
                            }
                        }
                        this.yearly.push(Number(this.yearly[this.yearly.length - 1]) + 1);
                        this.dateboundlist[this.yearly[this.yearly.length - 1]] = [];
                        for (let i in forecast) {
                                let small = {};
                                small.name = i;
                                small.value = forecast[i][0].y;
                                this.dateboundlist[this.yearly[this.yearly.length - 1]].push(small);
                        }
                        this.value = this.yearly[0]
                        // console.log(this.dateboundlist);
                        this.initCharts(this.dateboundlist[this.value]);
                    },
                    errored: (err) => {
                        // console.log(err);
                        if (err.response) {
                            this.islistLoad = false;
                            this.modelsData = [];
                        }
                    }
                });
            },
            initCharts(seconddata) {
                console.log(seconddata);
                this.$emit('changeNum','three',{arr: this.yearly,value: this.value})
                let num = []
                let countrylist=[]
                for (let item of seconddata) {
                    num.push(item.value);
                    countrylist.push(item.name)
                }
                var chartDom = document.getElementById('mainThree');
                this.myChart = echarts.init(chartDom);
                var option;
                option = {
                    xAxis: {
    data: countrylist,
    axisLabel: {
      inside: true,
      color: '#fff'
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    z: 10
  },
                    tooltip: {
                        trigger: 'item'
                    },
  yAxis: {
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      color: '#999'
    }
  },
    dataZoom: [
    {
      type: 'inside'
    }
  ],
                     grid: {
                        left: '0%',
                        right: '0%',
                        top: '3%',
                        bottom: '3%',
                        containLabel: true
                    },

                    series: [{
                         
                        type: 'bar',
                        showBackground: true,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#83bff6' },
                            { offset: 0.5, color: '#188df0' },
                            { offset: 1, color: '#188df0' }
                            ])
                        },
                        emphasis: {
                            itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#2378f7' },
                                { offset: 0.7, color: '#2378f7' },
                                { offset: 1, color: '#83bff6' }
                            ])
                            }
                        },
                        data: num
    
                    }]
                };

                option && this.myChart.setOption(option);
                                                          window.addEventListener('resize', () => {
                // 自动渲染echarts
                this.myChart.resize();
      })
            },
            //切换数据
            changeNum(val) {
                var option = this.myChart.getOption();
                option.series[0].data = this.dateboundlist[val];
                this.myChart.setOption(option);
            }
        }
    }
</script>

<style scoped>
    .two {
        width: 100%;
        height: 100%;
    }

    .header-select {
        width: 100%;
        height: 30px;
        text-align: center;
    }

    #mainThree {
        width: 100%;
        height: 100%;
        /* height: calc(100% - 50px); */
    }
</style>